<template>
  <div class="box">
    <!-- 一楼 -->
    <div class="f1">
      <div class="center">
        <div class="f1_list">
          <div class="f1_list_left">
            <h1>数据洞察世界 智能遇见未来</h1>
            <img src="@/assets/home/组38.png" alt="" />
            <div class="count">
              <div class="count_left">
                <img src="@/assets/home/组110.png" alt="" />
                <div class="count_content">
                  <h6>金融产品</h6>
                  <span> {{ idcount }}</span
                  ><i style="font-size: 18px"> 项</i>
                </div>
              </div>
              <div class="count_left">
                <img src="@/assets/home/组111.png" alt="" />
                <div class="count_content">
                  <h6>合作机构</h6>
                  <span> {{ fundercount }}</span
                  ><i style="font-size: 18px"> 家</i>
                </div>
              </div>
            </div>
          </div>
          <div class="f1_list_right">
            <img src="@/assets/home/组40.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!--二楼 -->
    <div class="f2">
      <div class="content">
        <div class="title">
          <h4>金融产品专区</h4>
          <i @click="$router.push('/crossBorder')">查看所有产品>></i>
        </div>
        <!-- 列表 -->
        <div class="prefectureList">
          <el-carousel height="270px" :interval="3000" autoplay trigger="click">
            <el-carousel-item>
              <ul>
                <li @click="$router.push('/crossBorder?producttype=103')">
                  <img class="img" src="@/assets/home/组033.png" alt="" />
                  <h2>国际贸易融资专区</h2>
                  <i>立即前往<img src="@/assets/home/组032.png" alt="" /></i>
                </li>
                <li @click="$router.push('/crossBorder?producttype=104')">
                  <img class="img" src="@/assets/home/组034.png" alt="" />
                  <h2>贸易结算专区</h2>
                  <i>立即前往<img src="@/assets/home/组032.png" alt="" /></i>
                </li>
                <li @click="$router.push('/crossBorder?producttype=102')">
                  <img class="img" src="@/assets/home/组035.png" alt="" />
                  <h2>供应链融资专区</h2>
                  <i>立即前往<img src="@/assets/home/组032.png" alt="" /></i>
                </li>
                <li @click="$router.push('/crossBorder?producttype=100')">
                  <img class="img" src="@/assets/home/组036.png" alt="" />
                  <h2>信用融资专区</h2>
                  <i>立即前往<img src="@/assets/home/组032.png" alt="" /></i>
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item>
              <ul style="display: flex; justify-content: flex-start">
                <li
                  style="margin-right: 40px"
                  @click="$router.push('/crossBorder?producttype=101')"
                >
                  <img class="img" src="@/assets/home/037.png" alt="" />
                  <h2>抵押融资专区</h2>
                  <i>立即前往<img src="@/assets/home/组032.png" alt="" /></i>
                </li>
                <li @click="$router.push('/crossBorder?producttype=105')">
                  <img class="img" src="@/assets/home/038.png" alt="" />
                  <h2>保函产品专区</h2>
                  <i>立即前往<img src="@/assets/home/组032.png" alt="" /></i>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="title">
          <h4>地方特色专区</h4>
          <i @click="$router.push('/crossBorder')">查看所有产品>></i>
        </div>
        <!-- 列表 -->
        <div class="prefectureList">
          <ul>
            <li @click="$router.push('/crossBorder?zone=首衡城专区')">
              <img class="img" src="@/assets/home/组042.png" alt="" />
              <h2>首衡城专区</h2>
              <i>立即前往<img src="@/assets/home/组032.png" alt="" /></i>
            </li>
            <li @click="$router.push('/crossBorder?zone=花湖机场专区')">
              <img class="img" src="@/assets/home/组043.png" alt="" />
              <h2>花湖机场专区</h2>
              <i>立即前往<img src="@/assets/home/组032.png" alt="" /></i>
            </li>
            <li @click="$router.push('/crossBorder?zone=武汉东湖高新专区')">
              <img class="img" src="@/assets/home/组044.png" alt="" />
              <h2>武汉东湖高新专区</h2>
              <i>立即前往<img src="@/assets/home/组032.png" alt="" /></i>
            </li>
            <li @click="$router.push('/crossBorder?zone=武汉经开专区')">
              <img class="img" src="@/assets/home/组045.png" alt="" />
              <h2>武汉经开专区</h2>
              <i>立即前往<img src="@/assets/home/组032.png" alt="" /></i>
            </li>
          </ul>
        </div>
        <div class="title">
          <h4>热门产品</h4>
        </div>
        <div class="prefectureList hotProduct">
          <div
            class="hotProduct_item"
            v-for="item in hotProduct"
            :key="item.productcode"
            @click="goApplication(item)"
          >
            <!-- <img src="@/assets/image/logo10拷贝.png" alt="" /> -->
            <div class="logo">
              <img src="@/assets/home/组046.png" alt="" />
            </div>
            <div class="hotProductBottom">
              <h3>{{ item.productname }}</h3>
              <div class="productMessage">
                <div class="productMessage_ul">
                  <h4>{{ item.amount }}</h4>
                  <h5>{{ item.showamount }}</h5>
                </div>
                <div class="productMessage_ul">
                  <h4>{{ item.month }}</h4>
                  <h5>{{ item.showmonth }}</h5>
                </div>
                <div class="productMessage_ul">
                  <h4>{{ item.radio }}</h4>
                  <h5>{{ item.showradio }}</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="title">
          <h4>常见问题</h4>
        </div>
        <!-- 常见问题 -->
        <div class="commonProblem">
          <div class="commonProblem_f1">
            <div class="commonProblem_input">
              <input v-model="input" placeholder="请描述问题" />
              <div class="btn">
                <img src="@/assets/image/放大镜.png" alt="" />
              </div>
            </div>
          </div>
          <div class="commonProblem_f2">
            <div>
              <div
                class="commonProblem_item"
                v-for="(item, index) in commonProblem"
                :key="index"
              >
                <h3 class="question">
                  <div class="circle">Q</div>
                  {{ item.title }}
                </h3>
                <h5 class="answer">
                  <div class="circle a">A</div>
                  <p>{{ item.content }}</p>
                </h5>
              </div>
            </div>
            <div class="more">
              <div class="btn" @click="$router.push('/commonProblem')">
                更多
              </div>
            </div>
          </div>
        </div>
        <div class="title">
          <h4>合作机构</h4>
        </div>
        <div class="cooperationBank">
          <el-carousel height="300px">
            <el-carousel-item>
              <ul>
                <li v-for="item in imgUrl" :key="item">
                  <img :src="item[1]" alt="" />
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item>
              <ul>
                <li v-for="item in imgUrl2" :key="item">
                  <img :src="item[1]" alt="" />
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item>
              <ul>
                <li v-for="item in imgUrl3" :key="item">
                  <img :src="item[1]" alt="" />
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <!-- 右侧固定栏 -->
    <div class="anim">
      <div class="anim_item">
        <img src="@/assets/home/组038.png" alt="" /> <span>操作手册</span>
      </div>
      <div class="anim_item">
        <img
          style="width: 29px; height: 23px"
          src="@/assets/home/组040.png"
          alt=""
        />
        <span>留言咨询</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, unref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { myPostFetch } from "@/utils";
const router = useRouter();
const input = ref("");
const commonProblem = ref([
  {
    title: "平台提供哪些金融服务？",
    content:
      "湖北国际贸易数字化平台金融服务板块，入驻多家银行、担保、保险等金融机构，为企业在跨境贸易全链条中提供全方位优质、定向金融服务，助力企业健康可持续发展。",
  },
  {
    title: "金融服务需要哪些办理条件？",
    content:
      "一般要求企业有进出口贸易资质、具有真实合法的贸易背景、营业状况良好、无重大诉讼案件、无征信不良记录。不同产品有所差异，具体以产品要求为准。",
  },
  {
    title: "产品申请的基本流程是什么？",
    content:
      "首先，企业用户发起产品申请，根据要求填写申请表单，进行提交；其次，平台会根据客户所填信息进行风控核实；最后，金融机构在关注该笔订单后启动尽调、审批、授信及放款。",
  },
  {
    title: "产品申请都需要提交哪些材料吗？",
    content:
      "在申请产品时，需要根据具体服务商产品的要求提交相应的材料，一般需要公司营业执照、法定代表人身份证、近两年一期财务报表、其他相关资质等。",
  },
  {
    title: "产品提交申请后，如何关注订单进度？",
    content:
      "企业用户在申请产品后，在用户中心“金融服务”中了解订单申请的受理审批进度。",
  },
  {
    title: "在操作过程中遇到问题怎么办？",
    content:
      "当用户在平台上操作遇到问题时，可以联系平台客服（客服电话：027-95198（人工服务时间：周一至周五 09:00-17：00）），客服会耐心为您解答；用户也可以通过右侧快捷菜单-“留言资讯”功能来反馈遇到的问题，后续将会有平台工作人员联系解决。",
  },
]);
// 获取信息
const getMessage = async function () {
  let url = "/api/products/selectproductcount";
  let params = {};
  let data = await myPostFetch(url, params);
  fundercount.value = data.data.fundercount;
  idcount.value = data.data.idcount;
};
// 生命周期函数
onMounted(() => {
  getMessage();
});
const fundercount = ref("-");
const idcount = ref("-");
const fileNameList = ref([
  { image: "1.png" },
  { image: "2.png" },
  { image: "3.png" },
  { image: "4.png" },
  { image: "5.png" },
  { image: "6.png" },
  { image: "7.png" },
  { image: "8.png" },
  { image: "9.png" },
  { image: "10.png" },
  { image: "11.png" },
  { image: "12.png" },
]);
const fileNameList2 = ref([
  { image: "13.png" },
  { image: "14.png" },
  { image: "15.png" },
  { image: "16.png" },
  { image: "17.png" },
  { image: "18.png" },
  { image: "19.png" },
  { image: "20.png" },
  { image: "21.png" },
  { image: "22.png" },
  { image: "23.png" },
  { image: "24.png" },
]);
const fileNameList3 = ref([
  { image: "25.png" },
  { image: "26.png" },
  { image: "27.png" },
  { image: "23.png" },
]);
const imgUrl = computed(() => {
  return unref(fileNameList).map((pItem) => {
    const image = new URL(`../assets/home/${pItem.image}`, import.meta.url)
      .href;
    const text = pItem.text;
    const lsit = [];
    lsit.push(text, image);
    return lsit;
  });
});
const imgUrl2 = computed(() => {
  return unref(fileNameList2).map((pItem) => {
    const image = new URL(`../assets/home/${pItem.image}`, import.meta.url)
      .href;
    const text = pItem.text;
    const lsit = [];
    lsit.push(text, image);
    return lsit;
  });
});
const imgUrl3 = computed(() => {
  return unref(fileNameList3).map((pItem) => {
    const image = new URL(`../assets/home/${pItem.image}`, import.meta.url)
      .href;
    const text = pItem.text;
    const lsit = [];
    lsit.push(text, image);
    return lsit;
  });
});
// 跳转产品申请
const goApplication = function (data) {
  localStorage.setItem("productcode", data.productcode);
  localStorage.setItem("productname", data.productname);
  localStorage.setItem("productcodeId", data.productcodeId);
  localStorage.setItem("producttype", data.producttype);
  localStorage.setItem("financingtype", data.financingtype);
  localStorage.setItem("radio", data.radio);
  if (data.productname == "关税保函") {
    router.push("/gsbhysxApply?row=2");
  } else if (data.productname == "产业数字贷") {
    router.push("/CyShuJuDai?row=2");
  } else if (data.productname == "银票贴现融资") {
    router.push("/prefectureRZ?row=2");
  }
};
// 热门产品
let hotProduct = ref([
  {
    productname: "关税保函",
    amount: "2000万",
    showamount: "最高额度",
    month: "13个月",
    showmonth: "最长期限",
    radio: "0.25%起",
    showradio: "季度综合成本",
    productcodeId: "6251742771560448",
    productcode: "SF001001",
    producttype: "105",
    financingtype: "",
  },
  {
    productname: "产业数字贷",
    amount: "1000万",
    showamount: "最高额度",
    month: "12个月",
    showmonth: "最长期限",
    radio: "4.00%起",
    showradio: "融资利率",
    productcodeId: "6193563105361920",
    productcode: "SCF006001",
    producttype: "102",
    financingtype: "",
  },
  {
    productname: "银票贴现融资",
    amount: "3亿",
    showamount: "最高额度",
    month: "6个月",
    showmonth: "最长期限",
    radio: "1.00%起",
    showradio: "贴现利率",
    productcodeId: "6796519670644736",
    productcode: "CAB004009",
    producttype: "102",
    financingtype: "",
  },
]);
</script>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  padding-bottom: 50px;
  width: 100%;
  background-color: #f5f7fa;
  .f1 {
    box-sizing: border-box;
    height: 400px;
    background: url(@/assets/home/组080.png) no-repeat;
    background-size: cover;
    margin-bottom: 10px;
    .center {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      width: 1200px;
      height: 400px;
      .f1_list {
        display: flex;
        width: 1200px;
        height: 400px;
        position: relative;
        .f1_list_left {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          h1 {
            font-size: 50px;
            font-weight: bold;
            color: #ffffff;
            // margin-top: 88px;
          }
          img {
            width: 521px;
            height: 38px;
            // margin-top: 42px;
          }
          .count {
            display: flex;
            width: 490px;
            height: 85px;
            .count_left {
              display: flex;
              align-items: center;
              height: 100%;
              margin-right: 80px;
              img {
                width: 84px;
                height: 84px;
              }
              .count_content {
                width: 120px;
                height: 85px;
                color: #fff;
                margin-left: 15px;
                h6 {
                  font-size: 20px;
                  font-weight: 500;
                }
                span {
                  font-size: 40px;
                  font-weight: 600;
                }
              }
            }
          }
        }

        .f1_list_right {
          display: flex;
          align-items: center;
          width: 500px;
          height: 100%;
          img {
            width: 499px;
            height: 337px;
          }
        }
      }
    }
  }
  .f2 {
    position: relative;
    width: 100%;
    // height: 100%;
    box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
    border-radius: 6px;
    background-color: #f5f7fa;
    .content {
      margin: 0 auto;
      width: 1200px;
      margin-bottom: 40px;
      .title {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 80px 0 50px;
        h4 {
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 33px;
          color: #181818;
          opacity: 1;
        }
        i {
          cursor: pointer;
          font-size: 16px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-style: italic;
          color: #0a7be0;
        }
      }
      .prefectureList {
        width: 1200px;
        height: 270px;
        ul {
          display: flex;
          justify-content: space-between;
          width: 1200px;
          height: 100%;
          overflow: auto;
          li {
            cursor: pointer;
            position: relative;
            display: flex;
            justify-content: center;
            width: 270px;
            height: 270px;
            background: #ef7c01;
            .img {
              position: absolute;
              width: 270px;
              height: 270px;
            }
            h2 {
              cursor: pointer;
              z-index: 99;
              margin-top: 50px;
              font-size: 24px;
              font-weight: bold;
              color: #ffffff;
              line-height: 46px;
              text-shadow: 0px 2px 22px rgba(13, 34, 60, 0.68);
            }
            i {
              cursor: pointer;
              position: absolute;
              right: 40px;
              bottom: 28px;
              font-size: 16px;
              font-family: Source Han Sans SC;
              font-weight: 300;
              color: #ffffff;
              img {
                cursor: pointer;
                margin-left: 8px;
                width: 19px;
                height: 10px;
              }
            }
          }
        }
      }
      // 热门产品
      .hotProduct {
        display: flex;
        justify-content: space-between;

        .hotProduct_item {
          cursor: pointer;
          display: flex;
          flex-direction: column;
          width: 370px;
          height: 270px;
          background: url(@/assets/home/组047.png) no-repeat;
          box-shadow: 0px 8px 20px 0px rgba(158, 158, 158, 0.18);
          .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 105px;
            img {
              width: 114px;
              height: 39px;
            }
          }

          .hotProductBottom {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 10px 36px 35px 43px;
            width: 100%;
            flex: 1;
            h3 {
              font-size: 24px;
              font-weight: bold;
              color: #000000;
            }
            .productMessage {
              width: 100%;
              display: flex;
              justify-content: space-between;
              .productMessage_ul {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                h4 {
                  font-size: 24px;
                  font-family: Source Han Sans SC;
                  font-weight: 500;
                  color: #0a7be0;
                }
                h5 {
                  font-size: 16px;
                  font-family: Source Han Sans SC;
                  font-weight: 300;
                  color: #999999;
                }
              }
            }
          }
        }
        .hotProduct_item:hover {
          transition: 0.2s;
          border-bottom: 8px solid #0a7be0;
        }
      }
      // 常见问题
      .commonProblem {
        box-sizing: border-box;
        padding-bottom: 50px;
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        // height: 1200px;
        background: #ffffff;
        .commonProblem_f1 {
          display: flex;
          justify-content: center;
          width: 100%;
          height: 150px;
          background: url(@/assets/home/组048.png) no-repeat;
          background-size: 100% 100%;
          .commonProblem_input {
            display: flex;
            align-items: center;
            width: 700px;
            position: relative;
            input {
              box-sizing: border-box;
              padding: 0 20px;
              width: 645px;
              height: 43px;
              border: 1px solid #cccccc;
            }
            .btn {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 55px;
              height: 43px;
              background: #0a7be0;
              img {
                cursor: pointer;
                width: 26px;
              }
            }
          }
        }
        .commonProblem_f2 {
          box-sizing: border-box;
          padding: 52px 60px;
          width: 100%;
          flex: 1;
          .commonProblem_item {
            border-bottom: 1px solid #dcdcdc;
            margin-bottom: 30px;
            .circle {
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
              font-size: 18px;
              font-family: Arial;
              font-weight: 400;
              width: 24px;
              height: 24px;
              background: #0a7be0;
              border-radius: 50%;
              margin-right: 12px;
            }
            .a {
              background: #ef7c01;
            }
            .question {
              display: flex;
              font-size: 18px;
              font-weight: 600;
              color: #0a7be0;
              margin-bottom: 20px;
            }
            .answer {
              display: flex;
              font-size: 16px;
              font-weight: 500;
              color: #909090;
              margin-bottom: 30px;
              p {
                flex: 1;
              }
            }
          }
          .commonProblem_item:last-child {
            border-bottom: 0px;
            margin-bottom: 0px;
          }
          .more {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            // margin-top: 65px;
            position: absolute;
            bottom: 50px;
            // background: #f00;
            .btn {
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 230px;
              height: 40px;
              background: #0a7be0;
              border-radius: 4px;
              font-size: 16px;
              font-weight: 300;
              color: #ffffff;
            }
          }
        }
      }
      // 合作银行
      .cooperationBank {
        width: 100%;
        height: 300px;
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            width: 300px;
            height: 100px;
            img {
              width: 300px;
              height: 100px;
            }
          }
        }
      }
    }
  }
  .anim {
    z-index: 100;
    position: fixed;
    top: 60vh;
    right: 0;
    width: 100px;
    // background: #ffffff;
    // box-shadow: 4px 0px 18px 0px #58759d;
    opacity: 0.9;
    .anim_item {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      background: #ffffff;
      box-shadow: 0px 4px 18px 0px rgba(89, 117, 157, 0.1);
      opacity: 0.9;
      font-size: 16px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #838383;
      margin-bottom: 5px;
      img {
        width: 23px;
        height: 29px;
        margin-bottom: 15px;
      }
    }
    .anim_item:hover {
      background: #dae4fc;
      opacity: 0.9;
      color: #0a7be0;
    }
  }
}
</style>
